
@function rem($px) {
    @return $px/(750/16)*1rem;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0); }
body{
    background: url("../imgs/bg.png") no-repeat center;
    background-size: 100% 100%;
}

.main-title {
    width: rem(517);
    height: rem(216);
    margin: rem(52) auto 0;
    img {
        width: 100%;
    }
}
.lotterypan-box {
    position: relative;

    width: rem(610);
    height: rem(692);
    margin: rem(8) auto rem(45);

    background: url("../imgs/turntable.png") no-repeat center;
    background-size: 100% 100%;

    .indicator {
        position: absolute;
        left: 50%;
        top: 50%;

        width: rem(246);
        height: rem(246);
        margin-left: rem(-123);
        margin-top: rem(-100);
        text-align: center;
        /* background: url("../imgs/pointer.png") no-repeat center;*/
        /* background-size: 100% ;*/
        img {
            height: 100%;
        }
    }
    /*.indicator.disable {
        background: url("../imgs/pointer_disable.png") no-repeat center;
    }*/
}

.draw-banner-box {
    width: rem(666);
    height: rem(84);
    margin: 0 auto;
    padding: rem(28) rem(42) rem(34);

    background: url('../imgs/news.png') no-repeat center;
    background-size: 100% 100%;

    .draw-banner {
        height: rem(34);
        overflow: hidden;
    }

    ul {
        width: 100%;
        -webkit-transition: all 1s;
        transition: all 1s;
    }

    li {
        font-size: rem(24);
        color: #2e2748;

        .time {
            float: right;
        }
    }
}

.sponsor {
    margin-top: rem(30);
    text-align: center;

    .see-sponsor {
        font-size: rem(28);
        color: #fff;
    }
}

.rule-box {
    position: relative;

    width: rem(666);
    /* height: rem(297);*/
    padding: rem(52) 0 rem(14) rem(24);
    margin: rem(106) auto rem(60);

    border:1px solid rgba(255, 255, 255, .5);

    .rule-title {
        position: absolute;
        left: 50%;
        top: rem(-20);
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);

        width: rem(180);
        background: #6F28B1;

        font-size: rem(28);
        color:#fff;
        text-align: center;
    }

    p {
        margin-bottom: rem(24);

        font-size: rem(20);
        color: #fff;
    }
}

.cover {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
}

.cover1 {
    display: none;
}
.cover2 {
    display: none;
}
.cover3 {
    display: none;
}

.popbox {
    position: absolute;
    top: rem(270);
    left: 50%;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    padding: rem(51) rem(45);
    width: rem(550);
    height: rem(550);
    border-radius:8px;
    background:#fff;
    box-sizing: border-box;

    .close-btn {
        position: absolute;
        top: rem(-56);
        right: 0;

        width: rem(46);
        height: rem(46);
        background: url("../imgs/close.png") no-repeat center;
        background-size: 100% 100%;
    }

    input {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0 rem(20);

        font-size: rem(24);
        border-radius: rem(8);
        border: none;
        background: #eee;
        box-sizing: border-box;
    }

    .inputwp:nth-of-type(1) {
        margin-bottom: rem(40);
    }

    .inputbox,
    .subinputbox {
        width: rem(458);
        height: rem(86);
        border-radius: rem(8);
        border:1px solid #ccc;
    }
    .subinputbox {
        float: left;
        width: rem(256);
        margin-right: rem(20);
    }
    .yzm {
        float: left;
        width: rem(184);
        height: rem(88);
        border-radius: rem(8);
        border: none;
        font-size: rem(26);
        line-height: rem(88);
        color:#fff;
        text-align: center;
        background:#333;
    }

    .to-draw-btn {
        width: rem(460);
        height: rem(88);
        margin-top: rem(80);

        border: 0;
        border-radius: rem(8);
        font-size: rem(36);
        color:#fff;
        background:#ff534b;
    }
    .tiptext {
        margin-top: rem(38);
        font-size: rem(24);
        color:#666;
        text-align: center;
    }

    .infobox {
        font-size: rem(36);
        color:#ff534b;
        text-align: center;
    }
    .goodsimg-box {
        width: rem(321);
        height: rem(120);
        margin: rem(56) auto rem(53);
        text-align: center;
        .goodsimg {
            width: 100%;
        }
    }

    .position {
        width: rem(459);
        height: rem(73);
        margin: 0 auto;
        border-radius: rem(100);
        font-size: rem(28);
        line-height: rem(73);
        color:#333;
        text-align:center;
        background:#eee;
    }
    .tishi {
        font-size: rem(28);
        text-align:center;
        color: #333;
    }
}

.cover2,
.cover3 {
    .popbox {
        padding: rem(60) 0;
    }
}
.smf {
    font-size: rem(30);
}

input::-webkit-input-placeholder{text-align: center;}
